<template>
	<view>
		<view style="width: 690rpx;margin: 20rpx auto;position: sticky;top: 0;">
			<u-search @change="reload()" v-model="params.name" :showAction="false" ></u-search>
		</view>
		<view class="list" v-if="list.length > 0">
			<view class="list-item" v-for="it in list" @click="toOhter(it)">
				<view class="list_item">
					<image class="list_item-img" :src="it.head" style="border-radius: 50%;"></image>
					<view class="list_item-content">
						<view class="list_item-content-h">
							<view class="list_item-content-h-name">
								{{it.nickname}}
								<!-- <image :src="ossUrl + `/static/card/6.png`" mode=""></image> -->
							</view>
						</view>
						<view class="list_item-content-subTitle">
							编码：{{it.code}}
						</view>
						<view class="list_item-content-subTitle">
							到期日期：<text style="color: #19be6b;">{{it.end_time}}</text>
						</view>
						
					</view>
					<view class="list_item-rig">
						
					</view>
				</view>
			</view>
		</view>
		<view class="noData" style="padding-bottom:120rpx;" v-else>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		</view>
	</view>
</template>

<script>
	import {
		certificate_list
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				//分页
				params:{
					page: 1,
					id: '',
					name: ''
				},
				isList: true, 
				list: [],
			};
		},
		onLoad(e) {
			
			this.params.id = e.id
			
			uni.setNavigationBarTitle({
			　　title: e.name
			})
			this.init()
		},
		onReachBottom() {
			if(this.isList){
				this.params.page ++
				this.init()
			}
		},
		methods:{
			reload(){
				this.init()
			},
			toOhter(it){
				uni.navigateTo({
					url:'/pages/index/other?isBackHome=2&shareId=' + it.b_id
				})
			},
			init(){
				uni.showLoading()
				certificate_list(this.params).then(res=>{
					uni.hideLoading()
					if(Array.isArray(res.data) && res.data.length > 0) {
						if(this.params.page === 1) {
							this.list = res.data
						} else {
							this.list = this.list.concat(res.data)
						}
					} else {
						this.list = []
						this.isList = false
					}
				})
			},
			
			toPage(it){
				uni.redirectTo({
					url:'/pagesA/posterDesign/add?id=' + it.id
				})
			}
		}
	}
</script>

<style lang="scss">
.list {
		width: 100%;

		.list-item {
			width: 100%;
			margin-bottom: 10rpx;
			border-bottom: 10rpx solid #eee;
			.list_item {
				box-sizing: $uni-bg-color;
				padding: 39rpx 49rpx;
				display: flex;
				align-items: center;

				.list_item-img {
					width: 100rpx;
					height: 100rpx;
					margin-right: 13rpx;
				}

				.list_item-content {
					width: 350rpx;

					.list_item-content-h {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 16rpx;

						.list_item-content-h-name {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;

							image {
								margin-left: 14rpx;
								width: 26rpx;
								height: 26rpx;
							}
						}

						.list_item-content-h-address {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 300;
							font-size: 24rpx;
							color: #7A7A7A;
							
							image {
								margin-right: 10rpx;
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.list_item-content-subTitle {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						display: flex;
						align-items: center;
						margin-bottom: 17rpx;

						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #12B475;
							// margin-left: 36rpx;
						}
					}

					.list_item-content-address {
						min-width: 0;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						//height: 23rpx;
					}
				}

				.list_item-rig {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					&>view {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #131313;

						image {
							margin-bottom: 18rpx;
							width: 38rpx;
							height: 38rpx;
						}
					}
				}
			}
		}
	}
	.list_item-content-h-address {
		width: 170rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: block!important;
		image {
			margin-bottom: -5rpx;
		}
	}
</style>
